<template>
    <div>
        <div class="goods-list">
            <router-link class="goods-item" v-for="(item, index) in goodslist" :key="index">
                <img :src="item.img_url" alt="">
                <h1 class="title">{{item.title}}</h1>
                <div class="info">
                    <p class="price">
                        <span class="new">{{item.sell_price}}</span>
                        <span class="old">{{item.market_price}}</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩{{item.stock_quantity }}台</span>
                    </p>
                </div>
            </router-link>    
            <!-- <router-link tag="div" :to="'/home/goodsinfo/'+item.id" class="goods-item"> -->
            <router-link tag="div" :to="'/home/goodsinfo/'" class="goods-item">
                <img src="../../imgs/menu1.png" alt="">
                <h1 class="title">段时间很快就ad会现在dasdasddasasdsadsdasdadsadassdadsa</h1>
                <div class="info">
                    <p class="price">
                        <span class="new">2199</span>
                        <span class="old">2699</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60台</span>
                    </p>
                </div>
            </router-link>
            <div class="goods-item">
                <img src="../../imgs/menu1.png" alt="">
                <h1 class="title">段时间很快就会现在</h1>
                <div class="info">
                    <p class="price">
                        <span class="new">2199</span>
                        <span class="old">2699</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60台</span>
                    </p>
                </div>
        </div>
        <div class="goods-item">
                <img src="../../imgs/menu1.png" alt="">
                <h1 class="title">段时间很快就会现在</h1>
                <div class="info">
                    <p class="price">
                        <span class="new">2199</span>
                        <span class="old">2699</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60台</span>
                    </p>
                </div>
        </div>
        <div class="goods-item">
                <img src="../../imgs/menu1.png" alt="">
                <h1 class="title">段时间很快就会现在</h1>
                <div class="info">
                    <p class="price">
                        <span class="new">2199</span>
                        <span class="old">2699</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60台</span>
                    </p>
                </div>
        </div>
        <div class="goods-item">
                <img src="../../imgs/menu1.png" alt="">
                <h1 class="title">段时间很快就会现在</h1>
                <div class="info">
                    <p class="price">
                        <span class="new">2199</span>
                        <span class="old">2699</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60台</span>
                    </p>
                </div>
        </div>
        </div>

        <mt-button type="danger" size="large" style="margin-top:10px" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
export default {
   data() {
       return {
           page:1,
           goodslist:[],
           isloaded:false
       }
   },
   methods: {
      async getGoodsListByPage(){
        //    根据页码获取 商品列表
        const {data}= await this.$http.get("/api/getgoods?pageindex=bumber")
        if(data.status===0){ 
            // 当获取到的数组长度为0，表示数据已经加载完了
            if(data.message.length<=0){
                isloaded=true
            }
            this.goodslist=this.goodslist.concat(data.message)
            }
       },
       getMore(){
        //    如果isloaded为true直接返回 表示没有数据了
           if(isloaded)return
        //    点击获得更多商品
        this.page++
        this.getGoodsListByPage()
       }
   },
}
</script>

<style lang="less" scoped>
.goods-list{
    // flex自左向右布局
    display: flex;
    // 默认flex的子元素不会换行  使用  flex-wrap: wrap;换行
    flex-wrap: wrap;
    justify-content: space-between;
    margin:0 7px;
    // margin-right: 7px;
}
.goods-item{
    margin-top: 7px;
        width: 49%;
        border: 1px solid #ccc;
        box-shadow: 0 0 1px gray;
        padding: 2px;
        // 因为一张图片分为3部分 图片和价格等靠边 描述在中间  可以使用flex-direction使主轴变成侧轴 然后用space-between
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }
    .info{
        background-color: rgb(230, 227, 227);
        // 解决两个字元素p的塌陷问题
        overflow: hidden;
    }
    img{
        min-height: 170px;
    }
    h1{
        font-size: 14px;
        font-weight: bold;
    }
    .new{
        font-size: 16px;
        color: red;
        font-weight: bold; 
        margin-right: 13px;     
    }
    .old{
        text-decoration: line-through;
        font-size: 12px;
    }
    .sell{
            font-size: 10px;
            display: flex;
            justify-content: space-between;
            margin: 3px;
    }
</style>